<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>易知学社</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="../double.css" />
		<link rel="stylesheet" type="text/css" href="course.css" />
		<script src="../../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 底部 -->
		<div class="footer">
			<div class="collection">
				<img src="../../img/collection2x.png">
				<span>收藏</span>
			</div>
			<script type="text/javascript">
				 $(".collection").click(function(){
				        if($('.collection img').attr('src')=='../../img/collection2x.png'){
				         $('.collection img').attr('src','../../img/shoucang.png');
				     }else{
				         $('.collection img').attr('src','../../img/collection2x.png');
				     }
				    })
			</script>
			<a href="sure.html">购买单节</a>
			<a href="sure.html">购买整套</a>
		</div>
		<!-- 视频 -->
		<div class="video">
			<video width="100%" height="211px" src="">
				<source src="myvideo.mp4" type="video/mp4"></source>
				<source src="myvideo.ogv" type="video/ogg"></source>
				<source src="myvideo.webm" type="video/webm"></source>
				<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
					<param name="movie" value="myvideo.swf" />
					<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
				</object>
				当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
			</video>
			<span class="prompt">购买后可观看</span>
		</div>
		<!-- 课程介绍 -->
		<div class="center">
			<div class="top">
				<div class="title">
					<h2>初九易术应用</h2><span>系列课程</span>
					<p>【正本清源·清晰知易】</p>
				</div>
				<div class="share">
					<a href="share.html">
						<img src="../../img/fenxiang2x.png" >
						<p>分享</p>
					</a>
				</div>
			</div>
			<div class="bottom">
				<p class="price">
					¥398.00 <del>¥450.00</del>
				</p>
				<p>
					128人已学习
				</p>
			</div>
		</div>
		<!-- 内容tab -->
		<div class="course_tab">
			<div class="select-list">
				<ul class="clearfix">
					<li class="fl over">课程详情</li>
					<li class="fl">课程目录</li>
				</ul>
			</div>
			<div class="content-list">
				<ul>
					<li class="over"></li>
					<li class="details">
						<a href="#">
							<h3>1、从宏观到微观彻底认识易经。</h3>
							<img src="../../img/lock2x.png" >
						</a>
						<a href="#">
							<h3>1、从宏观到微观彻底认识易经。</h3>
							<img src="../../img/lock2x.png" >
						</a>
						<a href="#">
							<h3>1、从宏观到微观彻底认识易经。</h3>
							<img src="../../img/lock2x.png" >
						</a>
						<a href="#">
							<h3>1、从宏观到微观彻底认识易经。</h3>
							<img src="../../img/lock2x.png" >
						</a>
						<a href="#">
							<h3>1、从宏观到微观彻底认识易经。</h3>
							<img src="../../img/lock2x.png" >
						</a>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			$(function(){
				$('.select-list li').click(function(){
					$(this).addClass('over').siblings('li').removeClass('over');
					$('.content-list li').removeClass('over').eq($(this).index()).addClass('over');
				})
			})
		</script>
	</body>
</html>
